import * as THREE from 'three'
import { OrbitControls } from '../build/OrbitControls.js'

// 创建一个三维场景
const scene = new THREE.Scene();

/**
 * 创建网格模型
 */
const geometry = new THREE.BoxGeometry(80, 80, 80);
const material = new THREE.MeshLambertMaterial({
  color: 0x00ff66, // 设置材质颜色
})
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


// 创建一个三位坐标轴
const axesHelper = new THREE.AxesHelper(200);
// 坐标轴添加到场景中
scene.add(axesHelper);


/**
 * 光源设置
 */
// 创建一个点光源对象
const pointLight = new THREE.PointLight(0xffffff);
// pointLight.intensity = 1.0;
pointLight.decay = 0.0 // 不会衰减
pointLight.position.set(300, 150, 200)
// pointLight.position.set(-300, -150, -200)
// scene.add(pointLight)
// 可视化点光源
// const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
// scene.add(pointLightHelper);

// 添加环境光
const ambient = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambient)

// 添加一个平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(50, 100, 80)
// directionalLight.target = mesh // 不设置是坐标原点
scene.add(directionalLight)
// 可视化平行光
const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 10, 0xffff00);
scene.add(dirLightHelper);



// width和height用来设置canvas画布尺寸
const width = window.innerWidth;
const height = window.innerHeight;
// const width = 800;
// const height = 500;


// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
// 设置相机的位置
camera.position.set(200, 200, 200)
// 相机的视线 观察目标点坐标
camera.lookAt(0, 0, 0) //坐标原点


// 创建一个webGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); // canvas画布宽高
renderer.render(scene, camera); // 执行一个渲染操作，类比相机的拍照。
// 把渲染结果canvas画布添加到页面上。
document.body.appendChild(renderer.domElement);


// 周期性执行。如果用了这个,代码里任何renderer.render都不需要了。
const clock = new THREE.Clock();
function render() {
  const spt = clock.getDelta() * 1000;
  console.log(spt)
  mesh.rotateY(0.01); // 周期性旋转，每次转动0.01弧度
  renderer.render(scene, camera);
  requestAnimationFrame(render)
}
// render()

// 创建相机控件
const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', function () {
  // 监听变化了，重新渲染
  renderer.render(scene, camera);
})

window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 全屏下设置观察范围长宽比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix方法更新。
  camera.updateProjectionMatrix()
  renderer.render(scene, camera);
}

